<template>
  <div class="flex flex-col h-full">
    <vxe-card title="" class="w-full" :border="false">
      <AuForm ref="formRef" :formList="formList" @submit="search" />
    </vxe-card>

    <div class="flex-grow overflow-hidden mt-4">
      <AuTable ref="tableRef" v-bind="gridOption" @actionClick="actionClick">
        <template #link_default="{ row }">
          <el-link :href="row.link" target="_blank" type="primary"
            >安装包下载
          </el-link>
        </template>
      </AuTable>
    </div>

    <BusinessModal v-model="showModel" :formData="rowData" @submit="search" />
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { AuTable } from "@/components/AuTable";
import { AuForm } from "@/components/AuForm";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import {
  softwareUpgradeDel,
  softwareUpgradeGetList,
  SoftwareUpgradeListProps
} from "@/api/factory/device";
import { ElMessage } from "element-plus";
import { SEARCH_FORM_LIST } from "./constant";
import router from "@/router";
import { businessGetList } from "@/api/factory/business";
import BusinessModal from "./BusinessModal.vue";

defineOptions({
  name: "FactoryBusinessManage"
});

// region 声明ref变量集合
const { proxy } = getCurrentInstance();
const formList = ref(SEARCH_FORM_LIST);
const gridOption = reactive<PropDefines>({
  isServerPage: true,
  showCheckbox: false,
  columns: [
    {
      field: "id",
      title: "business_manage.table.business_id",
      width: 150,
      align: "center"
    },
    { field: "brand", title: "business_manage.table.brand", align: "center" },
    { field: "city", title: "business_manage.table.city", align: "center" },
    {
      field: "operate_nature",
      title: "business_manage.table.operate_nature",
      align: "center"
    },
    {
      field: "store_num",
      title: "business_manage.table.store_num",
      align: "center"
    },
    {
      field: "device_num",
      title: "business_manage.table.device_num",
      align: "center"
    },
    {
      field: "create_time",
      title: "business_manage.table.create_time",
      width: 170,
      align: "center"
    }
  ],
  actions: [ACTION_TYPE.TADD, ACTION_TYPE.EDIT],
  topTools: [],
  operateTools: [],
  dataSource: [],
  fetchConfig: {
    query: {
      service: (params: ObjectProps) => {
        const { time, ...rest } = params;
        const p = {
          create_starttime: time?.[0],
          create_endtime: time?.[1],
          ...rest
        };
        return businessGetList(p);
      },
      param: () => formRef.value.getFormData()
    }
  }
});
const showModel = ref(false);
const rowData = ref(null);
const formRef = ref();
const tableRef = ref();
// endregion

// region 公共方法的集合
const businessSet = () => {
  businessGetList().then(res => {
    formRef.value.setFormProps("business_id", { options: res.data });
  });
};
// endregion

// region 组件事件的集合
const search = () => {
  tableRef.value.refresh();
};

type ActionType = {
  key: ACTION_TYPE;
  row: SoftwareUpgradeListProps;
};
const actionClick = ({ key, row }: ActionType) => {
  console.log(key, row);
  switch (key) {
    case ACTION_TYPE.TADD:
      rowData.value = null;
      showModel.value = true;
      break;
    case ACTION_TYPE.EDIT:
      rowData.value = row;
      showModel.value = true;
      break;
    case ACTION_TYPE.DELETE:
      proxy.$auMessageBox
        .confirm("是否确认删除：" + row.id + "的数据项？")
        .then(() => {
          const params = {
            delList: JSON.stringify([row])
          };
        });
      break;
  }
};

const toPage = () => {
  router.push("/deviceMaintain/softwareRecord");
};

// endregion
onMounted(() => {
  businessSet();
});
</script>
